
<!DOCTYPE HTML>
<html>
    <head>
        <title>滚轮事件mousewheel by 司徒正美</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            body{
                padding:10px 100px;
            }
            .slider{
                width:48px;
                height:200px;
                padding: 5px 0px;
                background:#eee;
                cursor:n-resize;
            }
            .slider-slot {
                width:16px;
                margin:10px 15px;
                height:180px;
                background:#eee;
                border:1px solid gray;
                border-color:#999 white white #999;
                position:relative;
            }
            .slider-trigger {
                width:14px;
                height:18px;
                font:1px/0 arial;
                border:1px solid gray;
                border-color:white #999 #999 white;
                background:#ccc;
                position:absolute;
            }

        </style>
        <script type="text/javascript">// <![CDATA[
            window.onload = function(){
                function log(s){
                    window.console && console.log(s);
                } 
                var get = function(i) {
                    return document.getElementById( i );
                }
                function addEvent(el, type, callback, useCapture  ){
                    if(el.dispatchEvent){//w3c方式优先
                        el.addEventListener( type, callback, !!useCapture  );
                    }else {
                        el.attachEvent( "on"+type, callback );
                    }
                    return callback;//返回callback方便卸载时用
                }
                var wheel = function(obj,callback){
                    var wheelType = "mousewheel"
                    try{
                        document.createEvent("MouseScrollEvents")
                        wheelType = "DOMMouseScroll"
                    }catch(e){}
                    addEvent(obj, wheelType,function(event){
                        if ("wheelDelta" in event){//统一为±120，其中正数表示为向上滚动，负数表示向下滚动
                            var delta = event.wheelDelta
                            //opera 9x系列的滚动方向与IE保持一致，10后修正
                            if( window.opera && opera.version() < 10 )
                                delta = -delta;
                            //由于事件对象的原有属性是只读，我们只能通过添加一个私有属性delta来解决兼容问题
                            event.delta = Math.round(delta) /120; //修正safari的浮点 bug
                        }else if( "detail" in event ){
                            event.wheelDelta = -event.detail * 40//为FF添加更大众化的wheelDelta
                            event.delta = event.wheelDelta /120  //添加私有的delta
                        }
                        callback.call(obj,event);//修正IE的this指向
                    });
                }
                function　preventDefault(e){
                    if( e.preventDefault )
                        e.preventDefault();
                    e.returnValue = false;
                }

                wheel(get("number"), function(e){
                    this.value = (Number(this.value) || 0) + e.delta  //120  ; 
                    this.select(); 
                    preventDefault(e)
                })

                wheel(get("img"), function(e){ 
                    this.style.width =  this.offsetWidth + e.delta + 'px';
                    this.style.height =  this.offsetHeight + e.delta + 'px';
                    preventDefault(e)

                })
          
                function range( num, max,min ) { 
                    return Math.min( max, Math.max( num,min ) ); 
                } 
                var  tar = get('sliderTrigger'); 
                wheel(get("slider"), function(e){
                    preventDefault(e)
                    tar.style.top = range( tar.offsetTop + ( -1 * e.delta * 10 ),160,0 ) + 'px';
                })
            }
        </script>
    </head>
    <body>
        <h2>文本框增加/减少值</h2>
        <div><input type="text" value="300" id="number">
            <span>文本框获得焦点后滚动鼠标滚轮</span>
        </div>
        <h2>鼠标滚动缩放图片</h2>
        <div>
            <img id="img" style="cursor:-moz-zoom-in" title="鼠标滚动 缩放大小" src="http://www.baidu.com/img/baidu.gif" />
        </div>
        <h2>鼠标滚动控制滑块移动</h2>
        <div id="slider" class="slider">
            <div class="slider-slot">
                <div id="sliderTrigger" class="slider-trigger">
                </div>
            </div>
        </div>
     
    </body>
</html>
